<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>展示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">

    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        background: #000;
    }
    .swiper-slide {
        font-size: 18px;
        color:#000;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 40px 60px;
        background: url("image/bg.png") no-repeat;
    }
    .swiper-slide .title {
        font-size: 35px;
        font-weight: 400;
    }
    .swiper-slide .resume {
        text-align: center;
        width: 200px;
        margin: 40px auto;
        height: 60px;
        line-height: 60px;
        border: 3px solid #000;
    }
    .swiper-slide img {
        width: 100%;
    }
    .swiper-slide .subtitle {
        font-size: 21px;
    }
    .swiper-slide .text {
        font-size: 14px;
        max-width: 400px;
        line-height: 1.3;
    }

    div#music { position: fixed; z-index: 5; top: 3vh; right: 4vw; width: 15vw; height: 15vw; border: 4px solid #ef1639; border-radius: 50%; background: #fff; }
    div#music > img.music_pointer { position: absolute; top: 24%; right: 2.5%; width: 28.421%; }
    div#music > img.music_disc    { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 79%; margin: auto;}
    div#music > img.music_play {
        -webkit-animation: music_disc 4s linear infinite;
        -o-animation: music_disc 4s linear infinite;
            animation: music_disc 4s linear infinite;
    }
    @-webkit-keyframes music_disc {
        0% {
            -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                    transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                    transform: rotate(360deg);
        }
    }
    @keyframes music_disc {
        0% {
            -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                    transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                    transform: rotate(360deg);
        }
    }
    
    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="title resume" >个人简历</div>
                <div class="img" ><img src="image/resume2.png" alt=""></div>
            </div>
            <div class="swiper-slide">
                <div class="title">Slide 2</div>
                <div class="subtitle">Subtitle</div>
                <div class="text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
                </div>
                <div id="music">
                    <img class="music_disc music_play" src="image/music_disc.png">
                    <img class="music_pointer" src="image/music_pointer.png">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="title">Slide 3</div>
                <div class="subtitle">Subtitle</div>
                <div class="text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
                </div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-white"></div>
        <!-- Add Navigation -->
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
        <audio autoplay="true">
            <source src="image/happynewyear.mp3" type="audio/mpeg">
        </audio>
    </div>

    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        parallax: true,
        speed: 600,
    });
        window.onload = function() {

        var music = document.getElementById("music");
        var audio = document.getElementsByTagName("audio")[0];

        audio.addEventListener('ended', function () {  
            music.childNodes[1].setAttribute("class","music_disc");
        }, false);


        music.addEventListener("touchstart", function() {
            if (audio.paused) {
                audio.play();
                this.childNodes[1].setAttribute("class","music_disc music_play");
            } else {
                audio.pause();
                this.childNodes[1].setAttribute("class","music_disc");
            };
            // if (audio.paused) {
            //     audio.play();
            //     this.childNodes[1].style.animationPlayState = "running";
            //     this.childNodes[1].style.webkitAnimationPlayState = "running";
            // } else {
            //     audio.pause();
            //     this.childNodes[1].style.animationPlayState = "paused";
            //     this.childNodes[1].style.webkitAnimationPlayState = "paused";
            // };
        }, false);
    };
    </script>
</body>
</html>